/*   1，以下代码逻辑是，将ajax请求的数据打印出来
// function real_time_data_show_test(){
//
//     $.ajax({
//         url:'/real_time_data_show_test',
//         method:'GET',
//         success:function (data){
//             $('.col-lg-3 h1').eq(0).text(data.cnt1);
//             $('.col-lg-3 h1').eq(1).text(data.cnt2);
//             $('.col-lg-3 h1').eq(2).text(data.cnt3);
//         },
//         error:function (){
//             alert('出错了')
//         }
//     })
//
// }
// setInterval(real_time_data_show_test,1000);
*/



/*  2，以下代码逻辑是，ajax动态获取的roll，pitch，yaw等数据在页面动态显示出来
//格式化时间的函数1
function formatDateToChinese(inputDate) {
  // 创建一个日期对象并设置时区为 UTC
  const date = new Date(inputDate + ' UTC');
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // 月份从0开始，所以要加1
  const day = date.getDate();
  const hours = date.getHours() - 8;
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  const formattedDate = `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`;


  return formattedDate;
}

//格式化时间的函数2
function time_transfer(inputDate){



                dt = new Date(inputDate);
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours() - 8;//获取时
                var m = dt.getMinutes();//获取分
                var s = dt.getSeconds();//获取秒
                return '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";


}

// function real_time_data_show(){
//
//     $.ajax({
//         url:'/real_time_data_show',
//         method:'GET',
//         success:function (data){
//             $('.col-lg-3 h1').eq(0).text(data.roll);
//             $('.col-lg-3 h1').eq(1).text(data.pitch);
//             $('.col-lg-3 h1').eq(2).text(data.yaw);
//             $('.col-lg-3 .stat-percent').eq(0).text(formatDateToChinese(data.time));
//             $('.col-lg-3 .stat-percent').eq(1).text(formatDateToChinese(data.time));
//             $('.col-lg-3 .stat-percent').eq(2).text(formatDateToChinese(data.time));
//             // $('.col-lg-3 .stat-percent').eq(3).text(formattedTime);
//             // $('.col-lg-3 .stat-percent').eq(4).text(formattedTime);
//             // $('.col-lg-3 .stat-percent').eq(5).text(formattedTime);
//             console.log('ajax ok')
//             console.log('data='+data)
//             console.log(JSON.stringify(data))
//             console.log('data.time='+data.time)
//
//         },
//         error:function (){
//             alert('出错了')
//         }
//     })
//
// }
// setInterval(real_time_data_show,1000);
*/




/*  3，在页面渲染出第一个图表
// (function chart_test(){
//     var mychart = echarts.init(document.querySelector('.line .chart'))
//
//     option = {
//   xAxis: {
//     type: 'category',
//     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//   },
//   yAxis: {
//     type: 'value'
//   },
//   series: [
//     {
//       data: [820, 932, 901, 934, 1290, 1330, 1320],
//       type: 'line',
//       smooth: true
//     }
//   ]
// };
//     mychart.setOption(option);
//         window.addEventListener("resize", function () {
//         // 让我们的图表调用 resize这个方法
//         mychart.resize();
//     });
// })();
*/


/*  4，模拟动态数据-时间数据，页面渲染动态图表
// function randomData() {
//   now = new Date(+now + oneDay);
//   value = value + Math.random() * 21 - 10;
//   return {
//     name: now.toString(),
//     value: [
//       [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
//       Math.round(value)
//     ]
//   };
// }
//
//
// let data = [];
// let now = new Date(1997, 9, 3);
// let oneDay = 24 * 3600 * 1000;
// let value = Math.random() * 1000;
// for (var i = 0; i < 1000; i++) {
//   data.push(randomData());
// }
//
// (function real_time_chart_test(){
//
//   myChart = echarts.init(document.querySelector('.real_time .chart'))
//
//   option = {
//     title: {
//       text: 'Dynamic Data & Time Axis'
//     },
//     tooltip: {
//       trigger: 'axis',
//       formatter: function (params) {
//         params = params[0];
//         console.log('params=');
//         console.log(params);
//         var date = new Date(params.name);
//         console.log('date');
//         console.log(date);
//         return (
//           date.getDate() +
//           '/' +
//           (date.getMonth() + 1) +
//           '/' +
//           date.getFullYear() +
//           ' : ' +
//           params.value[1]
//         );
//       },
//       axisPointer: {
//         animation: false
//       }
//     },
//     xAxis: {
//       type: 'time',
//       splitLine: {
//         show: false
//       }
//     },
//     yAxis: {
//       type: 'value',
//       boundaryGap: [0, '100%'],
//       splitLine: {
//         show: false
//       }
//     },
//     series: [
//       {
//         name: 'Fake Data',
//         type: 'line',
//         showSymbol: false,
//         data: data
//       }
//     ]
//   };
//   setInterval(function () {
//     for (var i = 0; i < 5; i++) {
//       data.shift();
//       data.push(randomData());
//     }
//     myChart.setOption({
//       series: [
//         {
//           data: data
//         }
//       ]
//     });
//   }, 1000);
//
//   option && myChart.setOption(option);
//
//   window.addEventListener("resize", function () {
//
//     // 让我们的图表调用 resize这个方法
//     myChart.resize();
//
//   });
//
// })();
*/


/* 5，姿态传感器角度数据-时间，实时波形显示，代码1（未实现）
function get_real_time_handle_no_return(data){

    $('.col-lg-3 h1').eq(0).text(data.roll);
            $('.col-lg-3 h1').eq(1).text(data.pitch);
            $('.col-lg-3 h1').eq(2).text(data.yaw);
            $('.col-lg-3 .stat-percent').eq(0).text(formatDateToChinese(data.time));
            $('.col-lg-3 .stat-percent').eq(1).text(formatDateToChinese(data.time));
            $('.col-lg-3 .stat-percent').eq(2).text(formatDateToChinese(data.time));
}
function get_real_time_handle_have_return(data){

    $('.col-lg-3 h1').eq(0).text(data.roll);
            $('.col-lg-3 h1').eq(1).text(data.pitch);
            $('.col-lg-3 h1').eq(2).text(data.yaw);
            $('.col-lg-3 .stat-percent').eq(0).text(formatDateToChinese(data.time));
            $('.col-lg-3 .stat-percent').eq(1).text(formatDateToChinese(data.time));
            $('.col-lg-3 .stat-percent').eq(2).text(formatDateToChinese(data.time));
                return {
                'roll':data.roll,
                'pitch':data.pitch,
                'yaw':data.yaw,
                'real_time':data.time
            }
}
function get_real_time_data(){
        $.ajax({
        url:'/real_time_data_show',
        method:'GET',
        success:function (data){
            // get_real_time_handle_no_return(data);
            // console.log(data);
         t =get_real_time_handle_have_return(data);
         console.log(t);
        },
        error:function (){
            alert('出错了')
        }
    })
}
// get_real_time_data();





(function real_time_data_chart(){

    function callback(param){

        return {
            roll:param.roll,
            pitch:param.pitch,
            yaw:param.yaw,
            time:param.time
        }
    }


    $.ajax({
        url:'/real_time_data_show',
        method:'GET',
        success:function (data){
            console.log(callback(data));
        },
        error:function (){
            alert('出错了')
        }
    })

  myChart = echarts.init(document.querySelector('.real_time .chart'))

  option = {
    title: {
      text: 'Dynamic Data & Time Axis'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        params = params[0];
        var date = new Date(params.time);
        return (
          date.getDate() +
          '/' +
          (date.getMonth() + 1) +
          '/' +
          date.getFullYear() +
          ' : ' +
          params.roll
        );
      },
      axisPointer: {
        animation: false
      }
    },
    xAxis: {
      type: 'time',
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: 'Real Data',
        type: 'line',
        showSymbol: false,
        data: p
      }
    ]
  };

  // setInterval(function () {
  //
  //     //
  //     // get_real_time_data();
  //     // option.series[0].data.push(data['roll']);
  //     // option.series[0].data.shift();
  //     // console.log(data);
  //     // // Update the chart with the new data
  //     // myChart.setOption(option);
  //
  // get_real_time_data(function (data) {
  //   option.series[0].data.push([data.real_time, parseFloat(data.roll)]);
  //   // console.log(data.real_time);
  //   // console.log(data.roll);
  //   // 如果数据点数量超过一定阈值，删除最旧的数据点
  //
  //     option.series[0].data.shift();
  //
  //   // 更新图表
  //   myChart.setOption(option);
  // });
  // }, 1000);
//    function change(pram){
//         pram.roll+=6;
//         pram.time+=1;
//
//     };
//
//   setInterval(function () {
//   for (var i = 0; i < 5; i++) {
//     data.shift();
//     data.push(change(fake_roll));
//   }
//   myChart.setOption({
//     series: [
//       {
//         data: data
//       }
//     ]
//   });
// }, 1000);

  option && myChart.setOption(option);

  window.addEventListener("resize", function () {
    myChart.resize();
  });
});
*/


/*
6，姿态传感器数据-时间的动态曲线显示
 */

var droll = 0,dpitch,dyaw,dreal_time;
var ddreal_time;
var roll_arr = [];
var pitch_arr = [];
var yaw_arr = [];
var time_arr = [];
var eightHoursInMilliseconds = 8 * 60 * 60 * 1000; // 8小时的毫秒数

var shifttime;

var ajax_get_data = {
  roll:1.2,
  time:new Date(2014, 9, 3,13,13,13)
}

//格式化时间的函数1
function formatDateToChinese(inputDate) {
  var fake_time = new Date(2023,11,14,0,29,20);
  /*
  fake_time=Thu Dec 14 2023 00:29:20 GMT+0800 (中国标准时间)
  //想要时间与真实时间不差8小时，date得是以上格式 Date日期字符串 
  注意有 GMT+0800 (中国标准时间)
  */
  const f_hours = fake_time.getHours();
  console.log('fake_time='+fake_time);
  console.log('f_hours='+f_hours);
  

  /* 
  问题：
  ajax请求返回的inputdate时间参数的格式为：Tue, 14 Nov 2023 00:11:02 GMT
  这是一个格林威治时间格式的日期字符串
  没有“+0800 (中国标准时间)”，
  当调用实例化函数 date = new Date(inputDate)时
  会Date（）方法发现你的日期字符串inputdate的格式是格林威治的格式，所以默认的使用本地时区的日期字符串去拼接你的inputdate日期字符串，
  问题在于，你的inputdate字符串本身就是本地时区的真实时间
  只是通过ajax请求传过来时 它的格式变成了 格林威治时间的日期字符串
  所以你调用 date = new Date(inputDate) 拼接了本地时区的字符串后 它的值增大了
  由于，本地时间（北京时间）与格林威治时间差了8小时，所以真实时间差8小时

  解决方法：
  在调用date = new Date(inputDate)前 给ajax请求获得的inputdate手动拼接成本地时间格式的日期字符串，这样在调用时就已经是本地日期字符串，将其转化为日期对象
  */
  console.log('inputDate='+inputDate);
  //解决方法将ajax返回的时间参数与“0800 (中国标准时间)”
  const date_string = inputDate + '+0800 (中国标准时间)';
  // 创建一个日期对象并设置时区为 UTC
  // const date = new Date(inputDate + 'UTC');
  const date = new Date(date_string);
  // const date =new Date(Date.parse(inputDate))
  //const date = new Date('Tue, 14 Nov 2023 00:11:02 GMT');
  // const dateString = 'Tue, 14 Nov 2023 00:11:02 GMT';
  // const date = new Date(dateString);


  console.log('date='+date);
  const year = date.getFullYear();
  console.log('year='+year);
  const month = date.getMonth() + 1; // 月份从0开始，所以要加1
  console.log('month='+month);
  const day = date.getDate();
  console.log('day='+day);
  const hours = date.getHours();
  console.log('hours='+hours);
  const minutes = date.getMinutes();
  console.log('minutes='+minutes);
  const seconds = date.getSeconds();
  console.log('seconds='+seconds);

  const formattedDate = `${year}年${month}月${day}日${hours}时${minutes}分${seconds}秒`;


  return formattedDate;
}


function fake_ajax(){

    $.ajax({
        url:'/real_time_data_show',
        type:'GET',
        success:function (data){
            $('.col-lg-3 h1').eq(0).text(data.roll);
            $('.col-lg-3 h1').eq(1).text(data.pitch);
            $('.col-lg-3 h1').eq(2).text(data.yaw);
            $('.col-lg-3 .stat-percent').eq(0).text(formatDateToChinese(data.time));
            $('.col-lg-3 .stat-percent').eq(1).text(formatDateToChinese(data.time));
            $('.col-lg-3 .stat-percent').eq(2).text(formatDateToChinese(data.time));
            droll = data.roll;
            roll_arr.push(droll);
            dpitch = data.pitch;
            pitch_arr.push(dpitch);
            dyaw = data.yaw;
            yaw_arr.push(dyaw);

            dreal_time = data.time;
            // console.log('dreal_time='+dreal_time);
            ddreal_time = new Date(dreal_time);
            ddreal_time.setHours(ddreal_time.getHours() - 8);
            //console.log('ddreal_time='+ddreal_time);
            time_arr.push([
             ddreal_time.getFullYear(),
             ddreal_time.getMonth() + 1,
             ddreal_time.getDate(),
             ddreal_time.getHours(),
             ddreal_time.getMinutes(),
             ddreal_time.getSeconds()
            ].join('-'));
        },
        error:function (){
            alert('出错了')
        }
    })

  // droll+=Math.random();
  // dreal_time+=1000;
  // ddreal_time= new Date(dreal_time);
}

// 在ajax外的函数中获取ajax请求的返回的数据会有问题，
// 因此如下函数代码逻辑正确，但实际获取不到ajax请求的数据不能使用
function load_data(){
    console.log(ddreal_time);
    console.log(droll);
    roll_arr.push(droll);
    time_arr.push([
    ddreal_time.getFullYear(),
    ddreal_time.getMonth() + 1,
    ddreal_time.getDate(),
    ddreal_time.getHours(),
    ddreal_time.getMinutes(),
    ddreal_time.getSeconds()
  ].join('-'));
}

(function(){

fake_ajax();

myChart = echarts.init(document.querySelector('.real_time .chart'));

option = {
    tooltip: {
            trigger: "axis",
            axisPointer: {
                lineStyle: {
                    color: "#dddc6b"
                }
            }
        },
        legend: {
            top: "0%",
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        grid: {
            left: "10",
            top: "30",
            right: "10",
            bottom: "10",
            containLabel: true
        },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: time_arr
  },
  yAxis: {
    type: 'value'
  },
    tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['翻滚角', '俯仰角', '航向角']
  },
  series: [
    {
      name: '翻滚角',
      type: 'line',
      smooth: true,
        symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: "#1c84c6",
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(1, 132, 213, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(1, 132, 213, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#1c84c6",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    }
                },
      data: roll_arr
    },
      {
          name: '俯仰角',
          type: 'line',
          smooth: true,
          symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: "#ee82ee",
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(255,182,193, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(255,182,193, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#ee82ee",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    }
                },
          data: pitch_arr

      },
      {
          name: '航向角',
          type: 'line',
          smooth: true,
          symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: "#00d887",
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(0, 216, 135, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0, 216, 135, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#00d887",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    }
                },
          data: yaw_arr

      }



  ]
};
myChart.setOption(option);

setInterval(function () {
  fake_ajax();
  if(roll_arr.length>10){
  roll_arr.shift();
  pitch_arr.shift();
  yaw_arr.shift();
  time_arr.shift();
  }
  myChart.setOption({
    xAxis: {
      data: time_arr
    },
    series: [
      {
        name: '翻滚角',
        data: roll_arr
      },
        {
            name: '俯仰角',
            data: pitch_arr
        },
        {
            name: '航向角',
            data: yaw_arr

        }

    ]
  });
}, 1000); // 每秒更新一次数据

    window.addEventListener("resize", function () {
    myChart.resize();
  });
// option && myChart.setOption(option);

})();







//一种通过ID获取数据的方法（还未成功）
// function real_time_data_show() {
//     var latestQuestionId = 0;  // 用于存储最新的问题 ID
//
//     function fetchData() {
//         $.ajax({
//             url: '/get_latest_id',  // 创建一个新的路由以获取最新的问题 ID
//             method: 'GET',
//             dataType: 'json',
//             success: function (data) {
//                 if (data && data.latest_id) {
//                     // 更新最新的问题 ID
//                     latestQuestionId = data.latest_id;
//
//                     // 使用获取的问题 ID 发送请求获取数据
//                     $.ajax({
//                         url: '/real_time_data_show',
//                         method: 'GET',
//                         data: { id: latestQuestionId },
//                         dataType: 'json',
//                         success: function (questionData) {
//                             // 处理返回的数据，更新页面内容
//                              $('.col-lg-3 h1').eq(0).text(data.roll);
//                              $('.col-lg-3 h1').eq(1).text(data.pitch);
//                              $('.col-lg-3 h1').eq(2).text(data.yaw);
//                         },
//                         error: function () {
//                             alert('获取数据出错');
//                         }
//                     });
//                 }
//             },
//             error: function () {
//                 alert('获取最新问题 ID 出错');
//             }
//         });
//     }
//
//     fetchData();  // 初始获取一次数据
//
//     // 定时轮询，每隔一段时间获取最新数据
//     setInterval(fetchData, 5000);  // 例如，每隔 5 秒获取一次数据
// }
//
// real_time_data_show();